<template>
	<view class="tab-bar">
		<view class="tab-bar-item" @click="switchTab('/pages/index/index')">
			<image class="tab-img" v-if="selected=='1'" src="/static/tabbar-home.png"></image>
			<image class="tab-img" v-else src="/static/tabbar-home-2.png"></image>
			<view class="tab_text" :style="{color: selected === '1' ? selectedColor : color}">首页</view>
		</view>
		<view v-if="UserInfo&&UserInfo.utype==0" class="tab-bar-item"
			@click="switchTab('/pages/housekeeping/housekeeping')">
			<image class="tab-img" v-if="selected=='2'" src="/static/tabbar-jz.png"></image>
			<image class="tab-img" v-else src="/static/tabbar-jz-2.png"></image>
			<view class="tab_text" :style="{color: selected === '2' ? selectedColor : color}">家政</view>
		</view>
		<view class="tab-bar-item" @click="switchTab('/pages/messsage/messsage','login')">
			<image class="tab-img" v-if="selected=='3'" src="/static/tabbar-message.png"></image>
			<image class="tab-img" v-else src="/static/tabbar-message-2.png"></image>
			<view class="tab_text" :style="{color: selected === '3' ? selectedColor : color}">消息</view>
		</view>
		<view class="tab-bar-item" @click="switchTab('/pages/my/my','login')">
			<image class="tab-img" v-if="selected=='4'" src="/static/tabbar-my.png"></image>
			<image class="tab-img" v-else src="/static/tabbar-my-2.png"></image>
			<view class="tab_text" :style="{color: selected === '4' ? selectedColor : color}">我的</view>
		</view>
	</view>
</template>
<script>
	import {
		ForceLogin
	} from "@/utils/filter.js"
	import {
		mapGetters
	} from "vuex"
	import storage from "@/utils/storage.js"
	export default {
		props: {
			selected: { // 当前选中的tab index
				type: String,
				default: 0
			},
			userIdentity: { // 当前角色
				type: Number,
				default: 0
			},

		},
		data() {
			return {
				color: "#333333",
				selectedColor: "#0fbdb3",
			}
		},
		computed:{
			...mapGetters(["UserInfo"])
		},
		methods: {
			// 底部tabbar页面跳转
			switchTab(url, type) {
				if (type === 'login') {
					if (ForceLogin() === false) {
						return
					}
				}
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-bar {
		position: fixed;
		z-index: 88;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab-img {
				width: 50rpx;
				height: 50rpx;
			}

			.tab-add {
				margin-top: -30rpx;
				width: 70rpx;
				height: 70rpx;
			}

			.tab_text {
				color: #4FE19BFF;
				font-size: 20rpx;
				margin-top: 8rpx;
			}
		}
	}
</style>
